<template>
  <div class="introduce-like">
    <div class="header-title">
      <span class="main-title">为你推荐</span>
      <span class="sub-title">Pick你的最爱！</span>
    </div>

    <div class="card-container">
      <div class="left-section">
        <div class="text-content">
          <h2 class="main-title">{{ currentContent.title }}</h2>
          <div class="sub-title-tags">
            <span
              v-for="(tag, index) in currentContent.tags"
              :key="index"
              class="tag"
            >
              {{ tag }}
            </span>
          </div>
          <p class="desc">{{ currentContent.desc }}</p>
        </div>

        <div class="small-images">
          <div
            v-for="(item, index) in smallImages"
            :key="index"
            class="small-image-item"
            :class="{ 'active': activeSmallImage === index }"
            @click="selectSmallImage(index)"
          >
            <img :src="item.url" :alt="'小图' + (index + 1)">
          </div>
        </div>
      </div>

      <div class="right-section">
        <div class="large-image-container">
          <img :src="currentContent.url" alt="大图展示" class="large-image">
          <div class="image-meta">
            <span class="current-index">{{ activeSmallImage + 1 }}</span>
            <span class="total-count">/ {{ smallImages.length }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 图片导入
import img1 from '@/assets/imgs/comic/card_img1.png';
import img2 from '@/assets/imgs/comic/card_img2.png';
import img3 from '@/assets/imgs/comic/card_img3.png';
import img4 from '@/assets/imgs/comic/card_img4.png';
import img5 from '@/assets/imgs/comic/card_img5.png';
import img6 from '@/assets/imgs/comic/card_img6.png';
import img7 from '@/assets/imgs/comic/card_img7.png';

const smallImages = ref([
  {
    url: img1,
    title: "异世界舅舅",
    tags: ["强者归来", "魔法"],
    desc: "外甥敬文探访医院，见到了从17年的昏迷状态中苏醒过来的舅舅，并且目睹舅舅使出了令人惊异的魔法。——没错，舅舅是从异世界回来..."
  },
  {
    url: img2,
    title: "进击的巨人",
    tags: ["热血", "战斗"],
    desc: "人类为了生存对抗巨人的故事，艾伦·耶格尔的复仇之路..."
  },
  {
    url: img3,
    title: "鬼灭之刃",
    tags: ["剑士", "鬼杀队"],
    desc: "少年炭治郎为了将变成鬼的妹妹变回人类而成为猎鬼人的故事..."
  },
  {
    url: img4,
    title: "海贼王",
    tags: ["冒险", "友情"],
    desc: "路飞和他的伙伴们寻找传说中的One Piece，成为海贼王的冒险故事..."
  },
  {
    url: img5,
    title: "火影忍者",
    tags: ["忍者", "友情"],
    desc: "漩涡鸣人从一个被孤立的孩子成长为村子的英雄..."
  },
  {
    url: img6,
    title: "龙珠",
    tags: ["战斗", "冒险"],
    desc: "孙悟空和他的朋友们寻找龙珠，保护地球的故事..."
  },
  {
    url: img7,
    title: "名侦探柯南",
    tags: ["推理", "悬疑"],
    desc: "高中生侦探工藤新一被毒药变成小孩，化名江户川柯南，继续解开各种谜案..."
  }
]);

const activeSmallImage = ref(0);

const currentContent = computed(() => {
  return smallImages.value[activeSmallImage.value] || smallImages.value[0];
});

const selectSmallImage = (index) => {
  activeSmallImage.value = index;
};
</script>

<style scoped lang="scss">
.introduce-like {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Noto Sans SC', sans-serif;

  /* 头部样式保持不变 */
  .header-title {
    margin-bottom: 30px;

    .main-title {
      font-size: 25px;
      font-weight: bold;
      margin-right: 10px;
    }

    .sub-title {
      color: #888;
      font-size: 14px;
    }
  }

  .card-container {
    display: flex;
    gap: 30px;
  }

  .left-section {
    flex: 4;
    display: flex;
    flex-direction: column;
    gap: 25px;

    /* 文字内容样式保持不变 */
    .text-content {
      .main-title {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 12px;
        color: #333;
      }

      .sub-title-tags {
        margin-bottom: 15px;

        .tag {
          display: inline-block;
          padding: 4px 10px;
          margin-right: 8px;
          background-color: #f0f0f0;
          border-radius: 4px;
          font-size: 13px;
          color: #666;
        }
      }

      .desc {
        font-size: 14px;
        line-height: 1.8;
        color: #555;
      }
    }

    /* 修改小图布局为水平排列 */
    .small-images {
      display: flex;
      /* 改为flex布局 */
      gap: 10px;
      overflow-x: auto;
      /* 允许横向滚动 */
      padding-bottom: 10px;
      /* 给滚动条留空间 */


      .small-image-item {
        flex: 0 0 auto;
        /* 不伸缩不收缩 */
        width: 80px;
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        position: relative;

        &.active {
          border-color: #ff4757;
          transform: scale(1.05);
        }

        &:hover {
          transform: scale(1.03);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  /* 右侧大图样式保持不变 */
  .right-section {
    flex: 6;

    .large-image-container {
      position: relative;
      width: 560px;
      height: 310px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);

      .large-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .image-meta {
        position: absolute;
        bottom: 15px;
        right: 15px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 14px;

        .current-index {
          font-weight: bold;
          color: #ff4757;
        }
      }
    }
  }
}
</style>
